<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-input
        placeholder="请输入是否发货搜索订单"
        v-model="input"
        clearable
        @clear="clear"
        @input = "inps"
        class="input-with-select"
      >
        <el-button slot="append" @click="hunt" icon="el-icon-search"></el-button>
      </el-input>

      <!-- 表格 -->
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column type="index" label="#" width="50">
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="100">
        </el-table-column>
        <el-table-column prop="pay_status" label="是否付款" width="100">
             <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.pay_status == 1">已付款</el-tag>
                <el-tag type="danger" v-if="scope.row.pay_status == 0">未付款</el-tag>
             </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="180">
        </el-table-column>
        <el-table-column label="下单时间" width="180">
            <template slot-scope="scope">
                {{ scope.row.create_time | turn }}
            </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="popup(scope.row)"></el-button>
            <el-button type="success" icon="el-icon-share" @click="dialogVisible=true"></el-button>
          </template> 
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- 物流状态弹出框 -->
    <el-dialog
  title="物流进度"
  :visible.sync="dialogVisible"
  width="50%">
  <div style="height: 900px;">
  <el-steps direction="vertical" :active="15">
    <el-step v-for="(item,index) in logList" :key="index" :title= item.context  :description=item.time></el-step>
  </el-steps>
  </div>
</el-dialog>

<!-- 编辑弹出框 -->
<el-dialog
  title="编辑订单"
  :visible.sync="dialogVisible2"
  width="50%">
  <!-- 表单 -->
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="订单编号" prop="order_number">
    <el-input :disabled="true" v-model="ruleForm.order_number"></el-input>
  </el-form-item>
  <el-form-item label="订单价格" prop="order_price">
    <el-input v-model="ruleForm.order_price"></el-input>
  </el-form-item>

  <el-form-item label="是否付款" prop="pay_status">
    <el-select v-model="ruleForm.pay_status" placeholder="请选择是否付款">
      <el-option label="已付款" value="1"></el-option>
      <el-option label="未付款" value="0"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="是否发货" prop="is_send">
    <el-select v-model="ruleForm.is_send" placeholder="请选择是否发货">
      <el-option label="是" value="1"></el-option>
      <el-option label="否" value="0"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="下单时间" prop="create_time">
    <el-input :disabled="true" v-model="ruleForm.create_time"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="Okpop">确 定</el-button>
  </span>
</el-dialog>
    </el-card>
  </div>
</template>
<script>
import { orderList,logistics,EditOrder } from '@/utils/api'
export default {
  name: "APP",
  data() {
    return {
      orderList:[], //总数据
      logList:[], //物流信息数据
      input: "", //搜索框
      total:0, //数据总条数
      pagenum:1, //当前页
      pagesize:5, //每页显示多少条
      dialogVisible:false, //弹出框默认状态
      dialogVisible2:false, //编辑弹窗默认状态
      params:{},
      ruleForm:{
        order_number:'',//订单编号
        order_price:'', //价格
        pay_status:'', //是否付款
        is_send:'',//是否发货
        create_time:'', //下单时间
      },

      rules: {
          order_price: [
            { required: true, message: '请输入订单价格', trigger: 'blur' },
          ],
          pay_status: [
            { required: true, message: '请选择是否付款', trigger: 'blur' },
          ],
          is_send: [
            { required: true, message: '请选择是否发货', trigger: 'blur' },
          ],
      }
    };
  },
  methods: {
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pagesize = val
        this.orders()
      },
    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pagenum = val
        this.orders()
      },

    //总数据请求封装
    orders(){
      let params = {
        pagenum:this.pagenum,
        pagesize:this.pagesize
      }
      orderList(params).then((res)=>{
        // console.log(res.data.goods);
        this.total = res.data.total
        this.orderList = res.data.goods
      })
    },

    //搜索按钮
    hunt(){  
        this.orderList = this.orderList.filter((item)=>item.is_send == this.input)
    },

    //请求输入框触发事件
    clear(){
        this.orders()
    },

    //当输入框发送改变时触发
    inps(val){
        // console.log(val);
        if(val == ''){
            this.orders()
        }
    },


    //编辑按钮事件
    popup(val){  
      // console.log(val);
      this.ruleForm = val
      this.params = val
      this.dialogVisible2 = true

      console.log(this.ruleForm.pay_status);
    },

    //确定编辑
    Okpop(){
      EditOrder(this.params).then((res)=>{
        // console.log(res);
        this.dialogVisible2 = false
        if(res.meta.status != 201){
          this.$message.error('更新失败！未知错误');
          return false
        }
        
        this.orders()
        this.$message({
          message: '更新信息成功',
          type: 'success'
        });
        
        
      })
    }
  },
  created() {
    this.orders();
    logistics(1106975712662).then((res)=>{
        // console.log(res);
       this.logList = res.data.reverse()
       
    })
  },
  mounted() {},

  //   过滤器转换时间格式
  filters:{
    turn(time){
      let date = new Date(time)
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
     }
  }

};
</script>
<style lang="scss" scoped>
.input-with-select {
  width: 300px;
  margin-bottom: 15px;
}
</style>
